<template>
	<div style="text-align: left;">
		<van-radio-group v-model="type" direction="horizontal" style="margin: 10px 0 10px 0;">
			<van-radio name="pie">饼形图</van-radio>
		</van-radio-group>
		<van-radio-group v-model="radio" direction="horizontal" @change="chartsSel" style="margin: 10px 0 10px 0;">
			<van-radio name="1">标准饼形</van-radio>
			<van-radio name="2">环形</van-radio>
			<van-radio name="3">玫瑰</van-radio>
			<van-radio name="4">环形玫瑰图</van-radio>
		</van-radio-group>
		<hr />
		<van-radio-group v-model="type" direction="horizontal" style="margin: 10px 0 10px 0;">
			<van-radio name="line">折线图</van-radio>
		</van-radio-group>
		<van-radio-group v-model="radio" direction="horizontal" @change="chartsSel" style="margin: 10px 0 10px 0;">
			<van-radio name="01">标准折线</van-radio>
			<van-radio name="02">圆滑弧线</van-radio>
			<van-radio name="03">堆叠折线</van-radio>
			<van-radio name="04">叠堆弧线</van-radio>
			<van-radio name="05">背景折线</van-radio>
			<van-radio name="06">渐变背景折线</van-radio>
		</van-radio-group>
		<hr />
		<van-radio-group v-model="type" direction="horizontal" style="margin: 10px 0 10px 0;">
			<van-radio name="bar">柱状图</van-radio>
		</van-radio-group>
		<van-radio-group v-model="radio" direction="horizontal" @change="chartsSel" style="margin: 10px 0 10px 0;">
			<van-radio name="a">横向柱状</van-radio>
			<van-radio name="b">竖向柱状</van-radio>
			<van-radio name="c">极坐标</van-radio>
			<van-radio name="d">叠堆柱状</van-radio>
		</van-radio-group>
		<hr />
		<van-radio-group v-model="type" direction="horizontal" style="margin: 10px 0 10px 0;">
			<van-radio name="lineOrBar">柱状折线混用</van-radio>
		</van-radio-group>
		<van-radio-group v-model="radio" direction="horizontal" @change="chartsSel" style="margin: 10px 0 10px 0;">
			<van-radio name="A">柱状折线混用</van-radio>
		</van-radio-group>
		<VCharts :options="options" :wh="wh"></VCharts>
	</div>
</template>
<script>
import VCharts from '../components/VChart.vue';
import { chart } from './echart.js'

export default {
	components: {
		VCharts
	},
	data() {
		return {
			wh: `width:500px,height:200px`,
			radio: '01',
			type: 'line',
			options: {},
			// types: [
			// 	{
			// 		"name": "专利认证",
			// 		"num": 2
			// 	},
			// 	{
			// 		"name": "技术转移",
			// 		"num": 0
			// 	},
			// 	{
			// 		"name": "大赛获奖",
			// 		"num": 13
			// 	},
			// 	{
			// 		"name": "知识产权",
			// 		"num": 2
			// 	},
			// 	{
			// 		"name": "资质认证",
			// 		"num": 0
			// 	}
			// ],
			titIcon: ['点击量', '阅读量', '收藏量'],
			types: [{
				"time": 1,
				"num": 10,
				"viewNum": 3,
				"collectNum": 34
			},
			{
				"time": 2,
				"num": 12,
				"viewNum": 23,
				"collectNum": 12
			},
			{
				"time": 3,
				"num": 22,
				"viewNum": 3,
				"collectNum": 5
			},
			{
				"time": 4,
				"num": 51,
				"viewNum": 66,
				"collectNum": 19
			}
			],
			dataMsg: {
				model: '',
				data: {
					legendData: [],
					xAxisData: [],
					itemData: []
				},
				grid: {},
				colors: {
					color: '',
					theme: '',
					itemColor: [],
					bgColor: []
				},
				legend: {
					bool: true,
					bottom: "5%",
					left: 'center',
					color: "#fff",
				},
				title: {
					text: ''
				},
				Axis: {
					xAxis: {},
					yAxis: {
						type: 'value',
						splitLine: {//去除网格线
							show: false
						},
					}
				},
				pie: {
					radius: '60%',
					center: []
				},
				labelStyle: {
					bool: false,
					position: '',
					seriesNmae: [],
					formatter: function () { }
				},
				toolboxShow: false
			}
		}
	},
	created() {
		setTimeout(() => {
		this.chartsSel()
	}, 500)
	},
	methods: {
		chartsSel() {
			this.dataMsg.model = this.radio
			this.dataMsg.data.xAxisData = []
			// 单条数据
			// this.dataMsg.data.itemData=this.types
			// this.types.map((item,indxe)=>{
			// 	this.dataMsg.data.xAxisData.push(item.name)
			// })
			// 多条数据
			let collectNum = [], num = [], viewNum = []
			this.dataMsg.data.itemData = []
			this.types.map((item, indxe) => {
				collectNum.push({
					name:'第'+item.time+'季度',
					num: item.collectNum
				})
				num.push({
					name:'第'+item.time+'季度',
					num: item.num
				})
				viewNum.push({
					name:'第'+item.time+'季度',
					num: item.viewNum
				})
				this.dataMsg.data.xAxisData.push("第" + item.time + "季度")
			})
			this.dataMsg.data.itemData.push(collectNum, num, viewNum)
			console.log("ddddd",this.dataMsg.data.itemData)
			// 多条数据  end
			this.dataMsg.grid = {
				left: '5%',
				top: '10%',
				bottom: '10%',
				right: '5%',
				containLabel: true
			}
			this.dataMsg.colors.color = '#000'
			this.dataMsg.colors.theme = '#ff0'
			let colors = ['#f0f', '#ff0', '#0ff', '#f66']
			this.dataMsg.colors.itemColor = function (params) {
				var num = colors.length;
				return colors[params.dataIndex % num];
			};
			this.dataMsg.colors.bgColor = colors
			this.dataMsg.legend = {
				bool: true,
				bottom: "0",
				left: 'center',
				color: "#222",
			}
			this.dataMsg.title = '单位（个）'
			this.dataMsg.pie.center = ['center', 'center']
			this.dataMsg.labelStyle.bool = true
			this.dataMsg.labelStyle.seriesNmae = this.titIcon
			this.dataMsg.data.legendData = this.titIcon
			
			if (this.type === 'pie') {
				this.dataMsg.labelStyle.formatter = function (parms) {
					return parms.data.name + ":" + parms.data.value;
				}
			} else if (this.type === 'bar') {
				this.dataMsg.labelStyle.formatter = function (parms) {
					return parms.value;
				}
				if (this.radio === 'a' || this.radio === 'd') {
					this.dataMsg.labelStyle.position = 'right'
					if (this.dataMsg.data.itemData[0] instanceof Array) {
						this.dataMsg.labelStyle.position = 'insideRight'
					}
				} else {
					this.dataMsg.labelStyle.position = 'top'
				}
			} else if (this.type === 'line') {
				this.dataMsg.labelStyle.formatter = function (parms) {
					return parms.name + ":" + parms.value;
				}
				this.dataMsg.labelStyle.bool = false
			} else if (this.type === 'lineOrBar') {
				this.dataMsg.labelStyle.position = 'top'
				this.dataMsg.labelStyle.formatter = function (parms) {
					return parms.data.value;
				}
			}
			
			this.options = chart(this.type, this.dataMsg)
		}
	}
}
</script>